<template>
    <div id="bill">
        <div class="bill-box wrapper" v-if='pageLoaded'>
            <div class="empty" v-if='!currentBill'>
                <div class="empty-placeholder">
                    <img src="../images/img_empty@3x.png" width="120">
                    <p>没有正在回收的订单</p>
                </div>
                <img src="../images/boxshadow@3x.png" width="100%">
                <div class="button" @click='goRouter("apply")' v-if='(status.authStatus === 40 && status.loanStatus === 0) || !sessionId'>立即评估, 闪电结款</div>
            </div>
            <div class="header" v-else>
                <div class="header-money">
                    <p>{{currentBill.needRepayAmount | toYuan}}</p>
                    <span>已结款金额 (元)</span>
                </div>
                <div class="header-date">
                    约定交付日  |  <span>{{currentBill.needRepayDate || placeholder}}  |</span>  <p>{{currentBill.repayMsg}}</p>
                </div>
                <div class="button" @click='goBillDetail(currentBill.id)'>订单详情</div>
            </div>

            <div class="history" v-if='historyBill.length'>
                <div class="list-title">历史交易</div>
                <ul class="list">
                    <li class='list-item' v-for='item in historyBill' @click='goBillDetail(item.id)'>
                        <div class="left">
                            <p>{{item.lendAmount | toYuan}}元</p>
                            <span>{{item.lendTime}}</span>
                        </div>
                        <div class="right">
                            <p>{{item.statusStr}}</p>
                            <i class='iconfont icon-arrow'></i>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- <p class="page-placeholder" v-if='!records.length'><span>暂无历史记录</span></p> -->
        </div>

        <footer-bar key='footer'></footer-bar>

        <login
            :show='showLogin'
            @finish='init'
            @showAgreement='show_agreement = true'
            @close='showLogin = false'></login>

        <pay-detail
            v-if='currentBill'
            :amount='currentBill.needRepayAmount'
            :show='showPayDetail'
            @close='showPayDetail=false'
            @finish='payDetailfinish'></pay-detail>

        <agreement
            :show='show_agreement'
            type='register'
            @close='show_agreement=false'></agreement>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import loading from '../components/Loading.vue'
    import agreement from '../components/Agreement.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import payDetail from '../components/PayDetail.vue'
    import login from '../components/Login.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { allApi, billApi, userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            loading,
            agreement,
            login,
            loadingMore,
            footerBar,
            payDetail
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                placeholder:'--',
                pageLoaded:false,
                showLogin:false,
                showPayDetail:false,
                show_agreement:false,
                records:[],
                info:{},
                status:{},
                currentBill:'',
                historyBill:[],
                complete:false,
                loading:true,
                loading_count:true,
                isLogin: false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            sessionId(){
                return this.localInfo.sessionId
            },
            configInfo(){
                return this.localInfo.configInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                allApi.log(eventParams)
            },
            getStatus(){
                this.showLoading()
                userApi.userStatus()
                .then(result=>{
                    this.hideLoading()
                    this.status = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getCurrentBill(){
                this.showLoading()
                billApi.currentBill()
                .then(result=>{
                    this.pageLoaded = true
                    this.hideLoading()
                    this.currentBill = result
                })
                .catch(error => {
                    console.error(error)
                    this.pageLoaded = true
                    this.hideLoading()
                })
            },
            getHistoryBill(){
                billApi.historyBillList()
                .then(result=>{
                    this.historyBill = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            goRouter(name){
                if(!this.sessionId){
                    this.showLogin = true
                    return
                }
                if(this.status.authStatus === 0){
                    this.$router.push({
                        name:'auth'
                    })
                    return
                }
                this.$router.push({
                    name:name
                })
            },
            goBillDetail(id){
                this.$router.push({
                    name:'bill-detail',
                    params:{
                        id:id || this.currentBill.id
                    }
                })
            },
            goIOU(item){
                if(item.repayState == 'SYSTEM_CLOSE'){
                    this.setMsgTip({
                        text:'该订单已关闭',
                        type:'warn'
                    })
                    return
                }
                this.$router.push({
                    name:'loan-IOU',
                    params:{
                        number:item.borrowNo
                    }
                })
            },
            setRecords(records){
                this.records = records
            },
            pay(){
                if(!this.configInfo.needBankCardAuth){
                    this.setMsgTip({
                        text:'还款请联系您的专属工作人员',
                        type:'warn',
                        time:5000
                    })
                    return
                }
                this.showPayDetail = true
            },
            payDetailfinish(obj){
                console.log(obj)
                let cardId = obj.cardId

                this.showLoading()
                billApi.promptRepay({
                    id:this.currentBill.id,
                    cardId:cardId,
                    callBackUrl:location.href
                })
                .then(result=>{
                    this.hideLoading()
                    location.href = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            init(){
                this.getStatus()
                this.getCurrentBill()
                this.getHistoryBill()
            }
        },
        created(){
            if(this.sessionId){
                this.init()
                return
            }
            this.pageLoaded = true

            let status = this.$route.query.status
            let msg = decodeURIComponent(this.$route.query.msg)
            if(status == 'fail'){
                this.setMsgTip({
                    text:msg,
                    type:'error'
                })
            }
            if(status == 'success'){
                this.setMsgTip({
                    text:'还款成功',
                    type:'success'
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #bill{
        &:after{
            content:'';
            position: absolute;
            top:0;
            left:0;
            right:0;
            height:156px;
            background-color: $themeColor;
            z-index:-1;
        }
        .history{
            background-color: #fafafa;
        }
        .component-pay-box{
            z-index:1002;
        }
        .bill-box{
            padding-bottom: 100px;
        }
        .empty{
            margin:16px 16px 24px 16px;
        }
        .empty-placeholder{
            background: url(../images/boxtexture@3x.png);
            background-size: 100% auto;
            padding-top: 16px;
            padding-bottom: 24px;
            text-align: center;
            p{
                @extend %font-caption;
                padding-top: 8px;
                color:$importColor;
            }
        }
        .header{
            margin: 32px 16px 8px 16px;
            padding-bottom: 24px;
            text-align: center;
            overflow:hidden;
            background: url(../images/boxtexture@3x.png);
            background-size: 100% auto;
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12);
        }
        .header-money{
            position: relative;
            padding-bottom: 22px;
            padding-top: 24px;
            &:after{
                content:'';
                position: absolute;
                bottom:0;
                left: 24px;
                right: 24px;
                border-bottom: 1px solid $sectionColor;
            }
            h2{
                @extend %font-caption;
                font-weight: 300;
                padding-top: 8px;
                padding-bottom: 6px;
                color:$lightColor;
            }
            p{
                @extend %font-headline;
                font-size: 45px;
                line-height: 68px;
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
                margin-top: -8px;
            }
        }
        .header-date{
            @extend %font-caption;
            text-align: center;
            padding-top: 16px;
            padding-bottom: 16px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                display: block;
                padding-left: 11px;
                color:$importColor;
            }
            p{
                color:#DD2C00;
                padding-left: 11px;
            }
        }
        .list-title{
            @extend %font-caption;
            background: url(../images/bg_title@3x.png) no-repeat center center;
            background-size: 104px 26px;
            -webkit-background-size: 104px 26px;
            width: 106px;
            height: 26px;
            margin:16px auto;
            line-height: 26px;
            text-align: center;
            color:$importColor;
        }
        .list{
            padding-left:24px;
            padding-right: 16px;
        }
        .list-item{
            display: flex;
            padding: 9px 0;
            justify-content: space-between;
            border-bottom: 1px solid $sectionColor;
            align-items: center;
            color:$lightColor;
            &:last-child{
                border-bottom: none;
            }
            .left{
                p{
                    @extend %font-subhead;
                    color:$importColor;
                }
                span{
                    @extend %font-caption;
                }
            }
            .right{
                display: flex;
                p{
                    @extend %font-body1;
                    padding-right: 8px;
                }
                .iconfont{
                    width: 24px;
                    text-align: center;
                    height: 24px;
                    line-height: 24px;
                }
            }
        }
    }

</style>
